<%--
  User: cxs
  Date: 2021/10/3 16:31
  @Version 1.0
  @Motto:放下杂念,只为迎接明天更好的自己
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100vh;
        }
        .all{
            width: 50%;
            margin: 0 auto;
            height: 70%;
            margin-top: 50px;
            box-sizing: border-box;
        }
        .title{
            text-align: center;
            letter-spacing: 25px;
            text-indent: 25px;
        }
        .table{
            width: 50%;
            margin: 0 auto;
        }

        tr td{
            background-color: cadetblue;
        }
        .area{
            width: 100%;
            height: 50px;
            resize: none;
        }
        button{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="all">
        <h2 class="title">问题详情</h2>
        <table class="table">
            <c:if test="${!empty detail}">
                <tr>
                    <th>问题</th>
                    <td>${detail.title}</td>
                </tr>
                <tr>
                    <th>问题描述</th>
                    <td>${detail.defaultDesc}</td>
                </tr>
                <c:if test="${detail.list.size() == 0}">
                    <tr>
                        <th colspan="2">暂无数据</th>
                    </tr>
                </c:if>
                <c:if test="${detail.list.size() > 0}">
                    <c:forEach var="item" items="${detail.list}" varStatus="vc">
                        <c:if test="${vc.count == 1}">
                            <tr>
                                <th>网友回答:</th>
                                <td>
                                    <fmt:formatDate value="${item.ansDate}" pattern="YYYY-MM-dd HH:mm:ss"></fmt:formatDate>
                                    <br/>
                                    ${item.ansContent}
                                </td>
                            </tr>
                        </c:if>
                        <c:if test="${vc.count > 1}">
                            <tr>
                                <th></th>
                                <td>
                                    <fmt:formatDate value="${item.ansDate}" pattern="YYYY-MM-dd HH:mm:ss"></fmt:formatDate>
                                    <br/>
                                        ${item.ansContent}
                                </td>
                            </tr>
                        </c:if>
                    </c:forEach>
                </c:if>
            </c:if>
            <tr>
                <th>我来回答:</th>
                <td>
                    <textarea class="area" id="result"></textarea>
                </td>
            </tr>
            <tr>
                <th colspan="2">
                    <button id="btn" type="button">提交答案</button> &nbsp;
                    <a href="${pageContext.request.contextPath}/index.jsp">返回首页</a>
                </th>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        $(document).ready(function (){
            $("#btn").click(function (){
                let result = $("#result").val();
                if(result === ""){
                    alert("必须填写您的答案!")
                    return;
                }
                let url = "${pageContext.request.contextPath}/answer/add?id=" + ${detail.id} + "&result=" + result;
                window.location.href = url;
            })
        })
    </script>
</body>
</html>
